<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        class Demo extends React.Component {
            /*
                (1).通过onXxx属性指定事件处理函数(注意大小写)
                    1.React使用的是自定义的事件，而不是使用原生的DOM事件————为了更好的兼容性
                    2.React中的事件是通过事件委派方法处理的(委托给最外层的元素)—————为了更加高效
                (2).通过event.target得到发生事件的DOM元素对象，发生事件中的元素可以省略ref，在项目开发中尽量少使用refs
            */
            myRef = React.createRef()
            butClick = ()=>{
                console.log(this.myRef.current.value)
            }
            showData = (event)=>{
                // event.target就可以获取到该节点
                console.log(event.target.value)
            }
            setInput = c => this.input1 = c
            render() {
                const {isHot} = this.state
                return (
                    <div>
                        <input ref={this.myRef} type="text"/>
                        <button onClick={this.butClick}>点击按钮提示数据</button>
                        <input type='text' onBlur={this.showData}/>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo/>,document.getElementById("test"))
    </script>
</body>
</html>